<template>
  <div class="title-con">
    <div class="title-header"
         :style="headertyle">
      <div class="title-text"
           :style="titleStyle">{{ customerTitle ? title : routerTitle }}</div>
      <slot name="header-right"></slot>
    </div>
    <div class="title-body">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PageTitle',
  computed: {
    routerTitle() {
      return this.$store.state.tagsView.visitedViews.find((route) => route && route.path === this.$route.path)?.title;
    },
  },
  props: {
    title: {
      type: String
    },
    titleStyle: {
      type: Object
    },
    headertyle: {
      type: Object
    },
    customerTitle: {
      type: Boolean,
      default: false
    }, // 是否自定义标题，当为true 时会显示 title 的值。false 则显示 路由配置的值。
  }
}
</script>

<style lang="scss" scoped>
.title-con {
  .title-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 8px 18px;
    border-bottom: 1px solid #e4e9ed;

    .title-text {
      font-family: PingFangSC, PingFang SC;
      font-size: 16px;
      font-weight: 500;
      color: #121314;
      line-height: 24px;
      // padding-left: 12px;
      position: relative;

      // &::after {
      //   content: "";
      //   position: absolute;
      //   left: 0;
      //   top: 50%;
      //   transform: translateY(-50%);
      //   width: 4px;
      //   height: 16px;
      //   background-color: var(--el-color-primary);
      // }
    }
  }
}
</style>
